<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /*模态框*/
    .modal {
        display: none; /* 默认隐藏 */
        position: fixed; /* 根据浏览器定位 */
        z-index: 1; /* 放在顶部 */
        left: 0;
        top: 0;
        width: 100%; /* 全宽 */
        height: 100%; /* 全高 */
        overflow: auto; /* 允许滚动 */
        background-color: rgba(0,0,0,0.4); /* 背景色 */
    }

        /*模态框内容*/
    .modal-content {
        display: flex; /*采用flexbox布局*/
        flex-direction: column; /*垂直排列*/
        position: relative;
        background-color: #fefefe;
        margin: 15% auto; /*距顶部15% 水平居中*/
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        animation: topDown 0.4s; /*自定义动画，从模态框内容上到下出现*/
    }

    @keyframes topDown {
        from {top: -300px; opacity: 0}
        to {top: 0; opacity: 1}
    }

    /*模态框头部*/
    .modal-header {
        display: flex; /*采用flexbox布局*/
        flex-direction: row; /*水平布局*/
        align-items: center; /*内容垂直居中*/
        justify-content: space-between; 
    }

    /*关闭X 样式*/
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 触发按钮 -->
  <button id="triggerBtn">模态框</button>
  <!-- 模态框 -->
  <div id="myModal" class="modal">
      <div class="modal-content">
          <div class="modal-header">
              <h2>头部</h2>
              <span id="closeBtn" class="close">&times;</span>
          </div>
          <div class="modal-body">
              <p>这是一个模态框！</p>
              <p>喜欢就点个赞吧！</p>
          </div>
          <div class="modal-footer">
              <h3>尾部</h3>
          </div>
      </div>
  </div>
  <script>
        /*建立模态框对象*/
    var modalBox = {};

    /*获取模态框*/
    modalBox.modal = document.getElementById("myModal");
    
    /*获得trigger按钮*/
    modalBox.triggerBtn = document.getElementById("triggerBtn");
    
    /*获得关闭按钮*/
    modalBox.closeBtn = document.getElementById("closeBtn");

    /*模态框显示*/
    modalBox.show = function() {
        console.log(this.modal);
        this.modal.style.display = "block";
    }

    /*模态框关闭*/
    modalBox.close = function() {
        this.modal.style.display = "none";
    }

    /*当用户点击模态框内容之外的区域，模态框也会关闭*/
    modalBox.outsideClick = function() {
        var modal = this.modal;
        window.onclick = function(event) {
            if(event.target == modal) {
                modal.style.display = "none";
            }
        }
    }

    /*模态框初始化*/
    modalBox.init = function() {
        var that = this;
        this.triggerBtn.onclick = function() {
            that.show();
        }
        this.closeBtn.onclick = function() {
            that.close();
        }
        this.outsideClick();
    }
  </script>
</body>
</html>